Invoice dan daftar transaksi

1 files changed, 39 insertions, 3 deletions

diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 09bf1ec7..4c33c97a 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -12,6 +12,9 @@ import Disclosure from "@/components/elements/Disclosure";
 import DescriptionRow from "@/components/elements/DescriptionRow";
 import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
 import { SkeletonList } from "@/components/elements/Skeleton";
+import Link from "@/components/elements/Link";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/elements/Alert";
 
 export default function DetailTransaction() {
   const router = useRouter();
@@ -59,9 +62,7 @@ export default function DetailTransaction() {
 
             <LineDivider />
 
-            <Disclosure 
-              label="Detail Produk"
-            />
+            <p className="h2 p-4">Detail Produk</p>
 
             <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
               { transaction?.products?.map((product, index) => (
@@ -76,7 +77,42 @@ export default function DetailTransaction() {
               </div>
             </div>
 
+            <LineDivider />
+
             <TransactionDetailAddress transaction={transaction} />
+
+            <LineDivider />
+
+            <div className="p-4">
+              <p className="h2">Invoice</p>
+              <div className="flex flex-col gap-y-3 mt-4">
+                { transaction?.invoices?.map((invoice, index) => (
+                  <Link href={`/my/invoice/${invoice.id}`} key={index}>
+                    <div className="shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between">
+                      <div>
+                        <p className="mb-2">{ invoice?.name }</p>
+                        <div className="flex items-center gap-x-1">
+                          { invoice.amount_residual > 0 ? (
+                            <div className="badge-red">Belum Lunas</div>
+                            ) : (
+                            <div className="badge-green">Lunas</div>
+                          ) }
+                          <p className="text-caption-2 text-gray_r-11">
+                            { currencyFormat(invoice.amount_total) }
+                          </p>
+                        </div>
+                      </div>
+                      <ChevronRightIcon className="w-5 stroke-2" />
+                    </div>
+                  </Link>
+                )) }
+                { transaction?.invoices?.length === 0 && (
+                  <Alert type='info' className='text-center'>
+                    Belum ada Invoice
+                  </Alert>
+                ) }
+              </div>
+            </div>
           </>
         ) : (
           <div className="p-4 py-6">